<template>
	<view :style="{'--price': vuex_config.price}">
		<view class="page_item relat_main">
			<view class="activity_name">{{ detail.name || '' }}</view>
			<view class="sign_time"
				v-if="parameter.form && detail.sign_in == 1 && parameter.form.signDate && parameter.form.signTime">
				签到时间：
				<text>{{ parameter.form.signDate | formTime() }}</text>
				<text style="margin-left: 10rpx;">{{ parameter.form.signTime | timeSlot() }}</text>
			</view>
			<view class="summary" v-if="parameter.summary">{{ parameter.summary }}</view>
		</view>
		<view class="page_item order_box" v-if="detail.total_amount > 0">
			<view class="pay_title">支付信息</view>
			<view class="pay_main">
				<view class="pay_item">
					<view class="pay_label">支付金额</view>
					<view class="pay_cont price">￥{{ detail.total_amount }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">参与人数</view>
					<view class="pay_cont">x {{ detail.num }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">支付方式</view>
					<view class="pay_cont">{{ payTypeObj[detail.pay_type] }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">下单时间</view>
					<view class="pay_cont">{{ detail.date_creation | formTime() }}</view>
				</view>
			</view>
		</view>
		<view class="page_item main_cont" v-if="!parameter.layout || parameter.layout == 1">
			<view class="main_item" v-for="(item, index) in option" :key="index">
				<image v-if="item.componentName == 'FormAdvert'" :src="item.value" mode="widthFix" class="form_advert">
				</image>
				<template v-else-if="item.componentName == 'tipText'"></template>
				<view :class="['form_cont', !showOption[item.componentName] ? 'alig_item' : '']"
					v-else-if="!item.businessEdit || item.value">
					<view class="cont_main">
						<view class="title">{{ item.required ? '*' : '' }} {{ item.title }}</view>
						<view class="cont">
							<template v-if="item.componentName == 'FormRadio'">
								<show-radio :checked="item.value" :options="item.options"></show-radio>
							</template>
							<template v-else-if="item.componentName == 'FormCheckbox'">
								<show-checkbox :checked="item.value" :options="item.options"></show-checkbox>
							</template>
							<template v-else-if="item.componentName == 'FormTextarea'">
								<view class="text_area">{{ item.value }}</view>
							</template>
							<template v-else-if="item.componentName == 'uploadImg'">
								<show-img :str="item.value"></show-img>
							</template>
							<template v-else>
								{{ item.value || '' }}
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-else-if="parameter.layout == 2">
			<view class="page_item layout2_cont">
				<view class="layout2_title">填写信息如下</view>
				<view class="layout_2_item" v-for="(item, index) in option" :key="index">
					<template v-if="item.componentName == 'tipText'"></template>
					<template v-else>
						<view class="title">{{ item.title }}：</view>
						<view class="val" v-if="item.componentName == 'uploadImg'">
							<show-img :str="item.value"></show-img>
						</view>
						<view class="val" v-else>{{ item.value }}</view>
					</template>
				</view>
			</view>
			<view class="page_item layout2_cont" v-if="adminOptin.length > 0">
				<view class="layout2_title">活动信息</view>
				<view class="layout_2_item" v-for="(item, index) in adminOptin" :key="index">
					<view class="title">{{ item.title }}：</view>
					<view class="val">{{ item.value }}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import showRadio from '../components/showRadio.vue';
	import showCheckbox from '../components/showCheckbox.vue';
	import showImg from '../components/showImg.vue';
	export default {
		props: {
			detail: {
				type: Object,
				default: () => {
					return {};
				}
			},
			parameter: {
				type: Object,
				default: () => {
					return {};
				}
			},
			adminOptin: {
				type: Array,
				default: []
			},
			option: {
				type: Array,
				default: []
			}
		},
		components: {
			'show-radio': showRadio,
			'show-checkbox': showCheckbox,
			'show-img':showImg
		},
		filters: {
			formTime(val) {
				return formatDate(val, 'YYYY-MM-DD');
			},
			timeSlot(str) {
				let arr = str.split(',');
				return arr[0] + ' ~ ' + arr[1];
			}
		},
		data() {
			return {
				payTypeObj: {
					0: '未支付',
					1: '微信支付',
					2: '余额支付',
					3: '线下支付',
					4: '微信支付'
				},
				showOption: {
					FormRadio: true,
					FormCheckbox: true,
					FormTextarea: true,
					uploadImg: true
				}
			};
		},

		mounted() {},

		methods: {}
	};
</script>

<style scoped lang="scss">
	.page_item {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #eee;
	}

	.relat_main {
		padding: 20rpx 30rpx;

		.activity_name {
			color: #000000;
			font-size: 36rpx;
		}

		.sign_time {
			color: #000000;
			font-size: 30rpx;
			margin-top: 10rpx;
		}

		.summary {
			white-space: pre-wrap;
			margin-top: 16rpx;
		}
	}

	.main_cont {
		padding: 0 24rpx;

		.main_item {
			border-bottom: 1px solid #f5f5f5;

			&:last-of-type {
				border-bottom: none;
			}

			.form_advert {
				width: 100%;
			}

			.main_title {
				font-weight: bold;
				text-align: center;
			}
		}
	}

	.form_cont {
		display: flex;
		padding: 24rpx 0;

		.cont_main {
			flex: 1;
			overflow: hidden;

			.title {
				line-height: 40rpx;
				font-size: 28rpx;
				color: #999;
				margin-right: 30rpx;
			}

			.cont {
				line-height: 40rpx;
				margin-top: 14rpx;
			}

			.text_area {
				text-indent: 2em;
			}
		}

		&.alig_item {
			align-items: center;

			.cont_main {
				display: flex;

				.cont {
					flex: 1;
					overflow: hidden;
					text-align: right;
					margin-top: 0;
				}
			}
		}
	}

	.layout2_cont {
		padding: 20rpx 30rpx;

		.layout2_title {
			padding-bottom: 6rpx;
		}

		.layout_2_item {
			font-size: 26rpx;
			margin-top: 10rpx;
			display: flex;
			line-height: 40rpx;
			color: #999;

			.title {
				margin-right: 6rpx;
			}

			.val {
				flex: 1;
				overflow: hidden;
			}

			.la2_img {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	.order_box {
		padding: 0 24rpx;

		.pay_title {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx 0 10rpx;
		}

		.pay_main {
			padding: 0 0 30rpx;

			.pay_item {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;
				font-size: 28rpx;

				.pay_label {
					color: #999;
					margin-right: 30rpx;
				}

				.pay_cont {
					flex: 1;
					overflow: hidden;
					text-align: right;

					&.price {
						color: var(--price);
					}
				}
			}
		}
	}
</style>
